<template>
    <div class="loginPage">
            <!-- tab -->
         <navbar class="navbar">
            <navbar-item type="back"></navbar-item> 
            <navbar-item type="title">
                    <text class="text">找回密码</text>
            </navbar-item>
            
        </navbar> 

        <div class="logo">
            <image class="image" src="../images/logo.png"></image>
        </div>

        <div class="formInput">
            <div class="iphoneNum">
                <icon class="presonIcon" :eeui="{
                    content:iconList[0],
                    fontSize:45,
                    color:'#242424'}"></icon>
                <input class="inputNum" type="number"  placeholder="请输入手机号码" placeholder-color="#c7c7c7">
            </div>
            <div class="iphoneNum">
                <icon class="presonIcon" :eeui="{
                    content:iconList[1],
                    fontSize:45,
                    color:'#242424'}"></icon>
                <input class="inputNum2" type="number"  placeholder="请输入验证码" placeholder-color="#c7c7c7">
                <text class="yzmText">获取验证码</text>
            </div>
            <button class="button" :eeui="{text:'下一步',backgroundColor:'#5fb527'}"></button>
           
        </div>


        





    
    </div>
</template>
<script>
const eeui = app.requireModule('eeui');

export default {
    data () {
        return {
            iconList:[
                'md-phone-portrait',
                'md-lock'
            ]
        }
    },
    methods: {
        back() {
            eeui.openPage({
                url: 'loginpage.js',
            }, function(result) {
                //......
            }); 
        }
    },
}
</script>
<style scoped>
.loginPage{
    background-color: #e7e8ec;
}
    .navbar {
        width: 750px;
        height: 100px;
        background-color: #e7e8ec;
    }
    .icon {
        width: 100px;
        height: 100px;
        color: #666;
    }
    .text {
        font-size: 36px;
        color: #1c1d21;
    }
    .logo{
        margin-top: 40;
        width: 150;
        height: 150;
        align-self: center;
    }
    .image{
        width: 150px;
        height: 150px;
        
    }
    .iphoneNum{
        width: 600px;
        align-self: center;
        position: relative;
        margin-top: 20px;
        background-color: #fff;
        border-radius: 20;
        
    }
    .presonIcon{
        width: 120px;
        height: 40px;
        position: absolute;
        top: 30;
        left: 0;
        border-right-color: #999;
        border-right-style: solid;
        border-right-width: 1px;

    }
    .yzmText{
        position: absolute;
        top: 0;
        right: 10;
        color: #5fb527;
        font-size: 28;
        width: 150;
        height: 100px;
        line-height: 100;
    }
    .inputNum{
         padding-left: 10px;
        height: 100px;
        font-size: 30px;
        width: 600px;
        border-radius: 20px;
        padding-left: 150px;
        

    }
    .inputNum2{
        height: 100px;
        font-size: 30px;
        width: 600px;
        padding-right: 220px;
        border-radius: 20px;
        padding-left: 150px;
        

    }
    .button {
        font-size: 24px;
        margin-bottom: 20px;
        width: 450px;
        height: 100px;
        border-radius: 100px;
        align-self: center;
        margin-top: 80px;
        font-size: 32;
    }

    .button2 {
        font-size: 24px;
        margin-bottom: 20px;
        width: 450px;
        height: 100px;
        align-self: center;
        margin-top: 20px;
        font-size: 32;
    }
    .ftext{
        text-align: right;
        color: #97989c;
        font-size: 26;
        margin-right: 80;
        margin-top: 30px;
    }
    .gorecharge{
        margin-right: 20px;
        font-size: 32;
        color: #444;
    }
</style>